<template>
<view>
	<view class="swiper">
		<swiper class="swiper" :current="1" :circular="true" :vertical="true"
		@change="changefun" @animationfinish="animationfinishfun" >
			<swiper-item v-for="(item,index) in PayVideo" :key="index">
				<view class="swiper-item">
					<video class="video" :id="'id'+index" loop="true"  ref="videoRef"
					:src="item.video_path" :custom-cache="false" :controls="false" 
					enable-play-gesture="true" :enable-progress-gesture="true" 
					:show-center-play-btn="false" @play="playVideo" ></video>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view v-if="is_active">
		<view class="top">
			<cover-view class="top_box">
				<cover-view class="ren">推荐</cover-view>
				<cover-view class="ren">推荐</cover-view>
				<cover-view class="ren">推荐</cover-view>
				<cover-view class="ren">推荐</cover-view>
				<cover-view class="search">
					<image src="../../static/video/search.png" style="width: 50rpx;height: 50rpx;margin-right: 50rpx;"></image>
				</cover-view>
			</cover-view>
		</view>
		<!--   -->
		<view v-if="showPlay" class="bofang" >
			<image src="../../static/video/bofang.png" style="width: 120rpx;height: 120rpx;margin: auto auto;" @click="playVideo()"></image> 
		</view>
		<view v-if="!showPlay" class="bofang" >
			<view  style="width: 120rpx;height: 120rpx;margin: auto auto;" @click="pauseVideo()"></view> 
		</view>
		<view class="left">
			<cover-view class="left_box">
				<cover-view class="ren">把自己的热爱永远置顶</cover-view>
				<cover-view class="ke_context">
					标题标题标题，这是标题这是标题这是标题，这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题
				</cover-view>
				<cover-view class="ke_lable">
					标题
				</cover-view>
				<cover-view class="ke_lable">
					标题
				</cover-view>
				<cover-view class="ke_lable">
					标题
				</cover-view>
				<cover-view class="ke_lable">
					标题
				</cover-view>
			</cover-view>
		</view>
		<view class="right">
			<cover-view class="right_box"> 
				<cover-view @click="like_change" class="top2">
					<cover-image v-if="PayVideo[index_]&&!PayVideo[index_].like" class="t_img" 
					src="../../static/video/like.png" mode="aspectFill"></cover-image>
					<cover-image v-else class="t_img" 
					src="../../static/video/like.png" mode="aspectFill"></cover-image>
					<cover-view class="font_t">9999</cover-view>
				</cover-view>
				<cover-view class="top2">
					<cover-image class="t_img" src="../../static/video/message.png" mode="aspectFill"></cover-image>
					<cover-view class="font_t">999</cover-view>
				</cover-view>
				<cover-view class="top2">
					<cover-image class="t_img" src="../../static/video/fenxiang.png" mode="aspectFill"></cover-image>
					<cover-view class="font_t">99</cover-view>
				</cover-view>
			</cover-view>
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			data: [
				{ id:1,"video_path": 'https://cdn.uviewui.com/uview/resources/video.mp4?t=1',
				  "like": false, "like_num": 0 },
				{id:2, "video_path": 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4?t=2',
				  "like": false, "like_num": 1 },
				{id:3, "video_path": 'https://cdn.uviewui.com/uview/resources/video.mp4?t=3',
				  "like": false, "like_num": 2 }, 
				{id:4, "video_path": 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4?t=4',
				  "like": false, "like_num": 3 }, 
				{id:1, "video_path": 'https://cdn.uviewui.com/uview/resources/video.mp4?t=5',
				  "like": false, "like_num": 4 },
			],
			index_: 1,
			index: '1',
			is_active: true,
			active: 2,
			PayVideo: [{like:false}],
			_arr: [],
			len: 0,
			showPlay:true,
			 
		}
	},
	onLoad() {
		console.log("进入"); 
		console.log(this.isFirst)
	},
	onShow(){
		console.log("显示");
		this.showPlay=true
	},
	methods: {
		playVideo(){ 
			let { len, PayVideo, active,
				_arr, t, index_ } = this
			this.videoContext = uni.createVideoContext('id' + index_)
			this.videoContext.play();
			this.showPlay=false;
		},
		like_change() { 
			let obj = this.PayVideo[this.index_]
			obj.like = !obj.like
			obj.like == true ? obj.like_num=parseInt(obj.like_num) + 1 : obj.like_num=parseInt(obj.like_num) - 1
		},
		changefun(e) { 
			this.showPlay=false;
			this.is_active = false
			let current = e.detail.current
			let { len, PayVideo, active,
				_arr, t, index_ } = this
			console.log("更换",this.index_)	
			// let videoContext = uni.createVideoContext('id' + index_)
			// videoContext.pause()
			this.PayVideo = PayVideo
			
		},
		pauseVideo(e) { 
			console.log("暂停",this.index_)	
			this.is_active = true 
			let videoContext = uni.createVideoContext('id' + this.index_)
			videoContext.pause()  
			this.showPlay=true;
		},
		animationfinishfun(e) { 
			let { index_, len, PayVideo,
				active, _arr, t } = this
			let current = e.detail.current
			this.is_active = true
			PayVideo[current]['istrue'] = true
			this.PayVideo = PayVideo
			let videoContext = uni.createVideoContext('id' + index_)
			videoContext.pause()
			videoContext = uni.createVideoContext('id' + current)
			videoContext.play()
			this.index_ = current
			if (PayVideo.length == len) {
				return
			}
			this.PayVideo.push(_arr[active])
			this.active += 1
		}
	},
	mounted() {
		console.log("初始化")
		uni.setStorageSync('video', this.data);
		let ind = 1
		this.index = ind
		const video = uni.getStorageSync('video');
		const len = video.length
		let b_arr = []
		let s_arr = []
		video.forEach((res, index) => {
			console.log(res)
			if (ind <= index) {
				b_arr.push(res)
			} else {
				s_arr.push(res)
			}
		})
		let _arr = b_arr.concat(s_arr.reverse())
		_arr = _arr.map(res => {
			res['istrue'] = false
			return res
		})
		_arr[0]['istrue'] = true
		const PayVideo = [
			_arr[len - 1], _arr[0], _arr[1]
		]
		this.PayVideo = PayVideo
		this._arr = _arr
		this.len = len
		// console.log(PayVideo)
		// this.$nextTick(function() {
		// 	let videoContext = uni.createVideoContext('id1')
		// 	videoContext.play()
		// })
	}
}
</script>

<style scoped lang="less">
page{ font-family: PingFang SC; }
.swiper {
	height: 100vh;
	.swiper-item {
		position: relative;
		height: 100vh;
		background-color: #000000;
	}
}
.video {
	position: relative;
	width: 100%;
	height: 100vh;
}
.bofang{
	position: fixed;
	top: calc(50% - 60rpx);
	left:calc(50% - 60rpx);
}
.top_box {
	position: fixed;
	top: 120rpx;
	left: 30rpx;
	width: 100%;
	color: #FFFFFF;
	 
	.ren {
		font-size: 32rpx; 
		margin-left: 32rpx;
		float: left;
	} 
	.search{
		float: right;margin-top: -5rpx;
	}
}
.left_box {
	position: fixed;
	bottom:60rpx;
	left: 30rpx;
	width: 516rpx;
	color: #FFFFFF;
	.ke {
		display: flex;
		align-items: center;
		cover-view { font-size: 26rpx; }
		cover-image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
	}
	.ren {
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}
	.ke_context {
		font-size: 30rpx;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
		white-space: normal;
	}
	.ke_lable{
		width:auto;
		background: white;
		height:40rpx;
		float: left;
		color: #000000;
		line-height: 40rpx;
		margin-bottom: 50rpx;
		margin-top: 10rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		margin-left: 15rpx;
	}
	.auto {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		cover-view { font-size: 26rpx; }
		cover-image {
			width: 26rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
}
.right_box {
	width: 100rpx;
	position: absolute;
	bottom: 60rpx;
	right: 12rpx;
	display: flex;
	flex-direction: column;
	color: #FFFFFF;
	.top1 {
		.avatar_img {
			width: 88rpx;
			height: 88rpx;
			border: 3px solid #FFFFFF;
			border-radius: 50%;
		}
		.add_img {
			width: 48rpx;
			height: 48rpx;
			margin: -20rpx auto 0;
		}
	}
	.top2 {
		text-align: center;
		margin-top: 37rpx;
		.t_img {
			height: 72rpx;
			width: 72rpx;
			margin: 0 auto 10rpx;
		}
		.font_t { font-size: 26rpx; }
	}
}
</style>


